<template>
  <div id="app">
    <div class="bottom-tab" v-if="$route.meta.tabl">
      <div class="tab-item"
           v-for="(value, key) in tabBarImgArr"
           :key = key
           @click="swithchTo(value.slot)">
        <img :src="value.normal" alt="首页">
        <span>{{value.title}}</span>
      </div>
    </div>
    <AllCategories v-show="isShow"></AllCategories>
    <router-view></router-view>
  </div>
</template>

<script>
  import AllCategories from './components/index/AllCategories/AllCategories'
  import router from './router'
export default {
  name: 'App',
  router:router,
    data(){
      return{
        isShow:false,
        tabBarImgArr:[
          {
            normal: require('./assets/155352224914259456.png'),
            title: '首页',
            slot: '/index/auth'
          },
          {normal: require('./assets/155352235108424095.png'),
            title: '找货',
            slot: '/goods/goods'
          },
          {normal: require('./assets/155352230873073172.png'),
            title: '拼购推荐',
            slot: '/recommendation/recommendation'
          },
          {normal: require('./assets/155352220182354151.png'),
            title: '玩法介绍',
            slot: '/introduced/introduced'
          },
          {normal: require('./assets/155352224914259456.png'),
            title: '我的拼购',
            slot: '/auth/PersonalCenter'
          }
        ],
      }
    },
  methods: {
    swithchTo(path){
      this.$router.push({path:path});
    }
  },
  components:{
    AllCategories
  },
  mounted() {
    this.$bus.$emit('isShows', this.isShow);
  }
}
</script>

<style scoped lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  background: #f2f2f2;
  box-sizing: border-box;
  position: relative;
  .bottom-tab{
    width: 100%;
    height: 160px;
    background-color: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    z-index: 999;
    .tab-item{
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #666;
      img{
        width: 35%;
        margin-bottom: 2px;
      }
    }
    .on{
      background: #fff;
    }
  }
}

</style>
